<!-- 如果不需要监听变更数据，就在父组件直接使用v-model:field="" -->
<template>
    <div class="">
        <van-field
            v-model="field"
            :required="required"
            center
            is-link
            :readonly="true"
            :name="name"
            :label="label"
            :placeholder="label"
            :rules="[{ required: required, message: '请选择' + label }]"
            @click="!readonly ? (showPicker = true) : ''"
        />
        <van-popup
            v-model:show="showPicker"
            position="bottom"
            closeable
            close-on-popstate
            round
            :style="{ height: '50%', width: '100%' }"
            @click-close-icon="
                showPicker = false;
                field = '';
            "
        >
            <div class="appointment-time-quantum">
                <!-- <div class="appointment-time-quantum-tips">
                    提示:请于预约时间段前20分钟抵达殡仪馆，办理相关手续。
                </div> -->
                <div class="appointment-time-quantum-box">
                    <div v-for="(item, index) in columns" :key="index" class="appointment-time-quantum-item">
                        <van-button
                            :disabled="item.disabled"
                            block
                            plain
                            native-type="button"
                            class="my-btn"
                            @click="onConfirm(item)"
                        >
                            <div class="btntext1">{{ item.text }}</div>
                            <van-image class="my-img" :src="item.image" fit="fill"></van-image>
                        </van-button>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw } from 'vue';
    import type { Ref, Raw } from 'vue';

    const {
        name,
        label,
        columns,
        readonly = false,
        required = false,
        confirmType = 'selectedValues',
    } = defineProps<{
        name?: string;
        label?: string;
        columns?: any[];
        readonly?: boolean;
        required?: boolean;
        confirmType?: string; //selectedValues返回值，selectedOptions返回对象
    }>();
    const emits = defineEmits<{
        (e: 'update:field', data: any): void;
    }>();
    const field = defineModel<any>('field', {
        required: false,
        default: '',
    });
    const showPicker: Ref<boolean> = ref(false);

    const onConfirm = (val) => {
        console.log(val);
        if (confirmType == 'selectedOptions') {
            emits('update:field', val);
        } else {
            emits('update:field', val.value);
        }
        showPicker.value = false;
    };
</script>

<style lang="scss" scoped>
    .appointment-time-quantum {
        // @include padding-global;
        box-sizing: border-box;
        height: 100%;
        padding-top: 40px;
        padding-bottom: 20px;
        overflow: hidden;
        .appointment-time-quantum-tips {
            font-size: 14px;
            color: red;
            text-align: left;
        }
        .appointment-time-quantum-box {
            @include padding-global;

            padding-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            height: 100%;
            overflow: auto;
        }
        .appointment-time-quantum-item {
            margin-top: 10px;
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 150px;
            border: 1px solid rgb(111, 185, 235);
            font-size: 14px;
        }
    }
    :deep(.btntext1) {
        font-size: 14px;
        padding: 10px 0;
    }
    .my-btn {
        width: 100%;
        height: 100%;
        padding: 0;
        :deep(.van-button__content) {
            width: 100%;
            .van-button__text {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                .my-img {
                    flex: 1;
                }
            }
        }
    }
</style>
